<template>
  <div>
    <n-grid :x-gap="20">
      <n-grid-item :span="6">
        <n-button size="small" type="info" secondary>提示词</n-button>

        <n-form ref="promptFormRef" style="margin-top: 20px;" :rules="rules" :model="promptForm">
          <n-form-item label="文案小说背景" path="background" >
            <n-input v-model:value="promptForm.background"
                     style="height: 150px" type="textarea"
                     placeholder="描述小说背景,应包含时代,国家,小说类型等信息。示例:这是一个中国古代的修仙小说"></n-input>
          </n-form-item>
          <n-form-item label="可能存在的同音字"  path="homophones">
            <n-input  v-model:value="promptForm.homophones" style="height: 150px" type="textarea" placeholder="可能存在的同音字或者词。 示例：洪荒，鸿蒙，道果"></n-input>
          </n-form-item>
          <n-button type="primary" :loading="revisionLoading" block @click="rivisionText">大模型修正</n-button>
        </n-form>
      </n-grid-item>
      <n-grid-item :span="18">
        <n-space justify="end">
          <n-space>
            <n-button type="primary" @click="saveText">保存文本</n-button>
          </n-space>
        </n-space>
        <n-grid :x-gap="10">
          <n-grid-item :span="12">
            <n-form-item  :label="`原文   共: `+( (content_text.match(/\n/g) || []).length  + 1 )+`行`"  >
              <n-input
                  type="textarea"
                   v-model:value="content_text"
                   readonly
                  :style="{ height: `${clientHeight - 409}px` }"></n-input>
            </n-form-item>
          </n-grid-item>
          <n-grid-item :span="12">
            <n-form-item  :label="`修正后   共: `+( (revision_text.match(/\n/g) || []).length  + 1 )+`行`" >
              <n-input type="textarea"  v-model:value="revision_text"  :style="{ height: `${clientHeight - 409}px` }"></n-input>
            </n-form-item>
          </n-grid-item>
        </n-grid>
        <Diff
            mode="split"
            theme="dark"
            :prev="content_text"
            :current="revision_text"
            language="plaintext"
            :folding="true"
            :input-delay="0"
            :virtual-scroll="{ height: 200, lineMinHeight: 24, delay: 100 }"
        />
      </n-grid-item>
    </n-grid>


  </div>
</template>
<script setup lang="ts">
import {
  NButton,
  NInput,
  NSpace,
  useMessage
} from 'naive-ui'
import {onMounted, reactive, ref} from "vue"
//@ts-ignore
import fileFunction from '@/libs/globalFunction/file.js'
import {storeToRefs} from "pinia"
import {useSystemStore} from "@/store/modules/useSystemStore"
import {gptControllerApi} from "@/api/chat/gptController.api";
import {whisperController} from "@/api/controller/media/whisperController";
import {Diff} from "vue-diff";


const message = useMessage()
const tableLoading = ref(false)
const currentTaskNum = ref(0)
const boardList = ref([])
const audio = ref(null)
const drawerWidth = ref(0)

const storyBoardSelectOption = ref("0")
const resourceId = ref(null)
const paintConfig = ref(null)
const skipFlag = ref(true)
const voiceConfig = ref(null)
const txtContents = ref([])
const promptFormRef  = ref(null)
const content_text = ref('')
const revision_text = ref('')
const revisionLoading = ref(false)


const promptForm = reactive({
  background: '',
  mainCharacterName: '',
  homophones: ''
})


const {
  clientHeight,
  layoutHeaderHeight,
  darkTheme,
  tabsHeight
} = storeToRefs(useSystemStore());

const rules = {
  background: [
    { required: true, message: '文案小说背景不能为空', trigger: 'blur' }
  ],
  homophones: [
    { required: true, message: '可能存在的同音字不能为空', trigger: 'blur' }
  ]
}

// 任务状态
const taskStatus = ref({
  successNum: 0,
  failNum: 0,
  totalNum: 0
})


const props = defineProps({
  userFileId: {
    type: String,
    required: true
  },
  closeAction:{
    type: Function,
    required: true
  }
})




// 列表字段
const createColumns = [
  {
    type: 'selection'
  },
  {
    title: '开始时间',
    key: 'startTime',
    width: 60,
    titleAlign: 'center'
  },{
    title: '开始时间',
    key: 'endTime',
    width: 60,
    titleAlign: 'center'
  },
  {
    title: '文本内容',
    key: 'videoText',
    width: 200
  },
  {
    title: '修正文本',
    key: 'revisionText',
    width: 200
  }
]



onMounted(() => {
  getText(props.userFileId)
})



const rivisionText = () => {
  promptFormRef.value?.validate((errors) => {
    if (!errors) {
      revisionLoading.value = true
      const data = {
        userFileId: props.userFileId,
        background: promptForm.background,
        mainCharacterName: promptForm.mainCharacterName,
        homophones: promptForm.homophones
      }
      gptControllerApi.revisionVideoText(data).then((res) => {
        if (res.code === 200) {
          revision_text.value = ''
          res.data.forEach((item:any,index:number)=>{
            if (index === res.data.length -1 ) {
              revision_text.value += item.rivisionText
            }else {
              revision_text.value += item.rivisionText + '\n'
            }
          })
        }
      }).finally(() => {
        revisionLoading.value = false
      })
    }
  })
}


const getText = (userFileId: string) => {
  content_text.value = ''
  // 查看文本
  tableLoading.value = true
  whisperController.getText(userFileId).then((res) => {
    if (res.code === 200) {
      txtContents.value = res.data
      res.data.forEach((item:any,index:number)=> {
        if (index === res.data.length -1 ) {
          content_text.value += item.videoText
        }else {
          content_text.value += item.videoText + '\n'
        }
      })
    }
  }).finally(() => {
    tableLoading.value = false
  })
}

const saveText = () =>{
  const revisionTexts = revision_text.value.split('\n')
  if (txtContents.value.length != revisionTexts.length){
    message.error('修正文本行数不一致')
    return
  }else {
    txtContents.value.forEach((item:any,index:number)=>{
      item.rivisionText = revisionTexts[index]
    })
    whisperController.saveText(txtContents.value).then((res) => {
      if (res.code === 200) {
        message.success('保存成功')
        props.closeAction()
      }
    })
  }
}
</script>
